<template>
	<div class="user-wrapper">
		<div class="content-box">
			<a href="https://www.baidu.com" target="_blank">
				<span class="action">
					<a-icon type="question-circle-o"></a-icon>
				</span>
			</a>
			<!-- <notice-icon class="action" /> -->
			<a-dropdown>
				<span class="action ant-dropdown-link user-dropdown-menu">

					<!-- <a-avatar class="avatar" size="small" :src="avatar" /> -->
					<!-- <span>{{ nickname }}</span> -->
					<a-avatar class="avatar" size="small" src="https://preview.pro.loacg.com/avatar2.jpg" />
					<span>{{ nickname }}</span>
				</span>
				<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
					<a-menu-item key="0">
						<router-link :to="{ name: 'center' }">
							<a-icon type="user" />
							<span>个人中心</span>
						</router-link>
					</a-menu-item>
					<a-menu-item key="1">
						<router-link :to="{ name: 'settings' }">
							<a-icon type="setting" />
							<span>密码修改</span>
						</router-link>
					</a-menu-item>
					<a-menu-divider />
					<a-menu-item key="3">
						<a href="javascript:;" @click="handleLogout">
							<a-icon type="logout" />
							<span>退出登录</span>
						</a>
					</a-menu-item>
				</a-menu>
			</a-dropdown>
			<!-- <lang-select /> -->
		</div>
	</div>


</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex'

	export default {
		name: 'SpNavInfo',

		computed: {
			...mapGetters(['nickname', 'avatar'])

		},
		methods: {
			...mapActions(['Logout']),
			handleLogout() {
				this.$confirm({
					title: '提示',
					content: '确定要注销登录吗 ?',
					okText: '注销',
					cancelText: '取消',
					onOk: () => {
						return this.Logout({}).then(() => {
							this.$router.push({ path: '/login' }, () => {
							})
							// setTimeout(() => {
							// 	window.location.reload()
							// }, 16)
						}).catch(err => {
							this.$message.error({
								title: '错误',
								description: err.message
							})
						})
					},
					onCancel() {}
				})
			}
		}
	}
</script>

<style>
	.sp-lay-header .user-wrapper {
		float: right;
		height: 100%;
	}

	.sp-lay-header .user-wrapper .action {
		cursor: pointer;
		padding: 0 12px;
		display: inline-block;
		-webkit-transition: all .3s;
		transition: all .3s;
		height: 100%;
		color: rgba(0, 0, 0, .65);
	}

	.sp-lay-header .header .user-wrapper .action .avatar {
		margin: 20px 8px 20px 0;
		color: #1890ff;
		background: hsla(0, 0%, 100%, .85);
		vertical-align: middle;
	}

	.ant-dropdown {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
		-webkit-font-feature-settings: "tnum";
		font-feature-settings: "tnum";
		position: absolute;
		top: -9999px;
		left: -9999px;
		z-index: 1050;
		display: block;
	}

	.user-dropdown-menu-wrapper.ant-dropdown-menu {
		padding: 4px 0;
	}

	.user-dropdown-menu-wrapper.ant-dropdown-menu .ant-dropdown-menu-item {
		width: 120px;
	}

	.ant-dropdown-menu {
		position: relative;
		margin: 0;
		padding: 4px 0;
		text-align: left;
		list-style-type: none;
		background-color: #fff;
		background-clip: padding-box;
		border-radius: 4px;
		outline: none;
		-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
		-webkit-transform: translateZ(0);
	}

	.ant-dropdown-menu-item>a,
	.ant-dropdown-menu-submenu-title>a {
		display: block;
		margin: -5px -12px;
		padding: 5px 12px;
		color: rgba(0, 0, 0, .65);
		-webkit-transition: all .3s;
		transition: all .3s;
	}

	user-dropdown-menu-wrapper.ant-dropdown-menu .ant-dropdown-menu-item>.anticon:first-child,
	.user-dropdown-menu-wrapper.ant-dropdown-menu .ant-dropdown-menu-item>a>.anticon:first-child,
	.user-dropdown-menu-wrapper.ant-dropdown-menu .ant-dropdown-menu-submenu-title>.anticon:first-child .ant-dropdown-menu-submenu-title>a>.anticon:first-child {
		min-width: 12px;
		margin-right: 8px;
	}
</style>
